class MF {
    constructor(smallbox, mask, bigbox, li) {
      this.oSmallbox = smallbox;
      this.oMask = mask;
      this.oBigbox = bigbox;
      this.oLis = li;
      this.eventBind();
    }
  
    //   鼠标划入小盒子放大镜和大盒子出现
  
    mouseover() {
      let that = this;
      this.oSmallbox.onmouseover = function () {
        that.oMask.style.display = "block";
        that.oBigbox.style.display = "block";
      };
    }
    //   鼠标划出小盒子放大镜和大盒子消失
  
    mouseout() {
      let that = this;
      this.oSmallbox.onmouseout = function () {
        that.oMask.style.display = "none";
        that.oBigbox.style.display = "none";
      };
    }
  
    //   鼠标在小盒子上进行移动的函数
    mousemove() {
      let that = this;
      this.oSmallbox.onmousemove = function (evt) {
        let e = evt || event;
        let left =
          e.pageX - that.oMask.offsetWidth / 2 - that.oSmallbox.offsetLeft;
          // console.log(e.pageX,  that.oMask.offsetWidth / 2,  that.oSmallbox.offsetLeft)
          console.log(left)
  
        let top =
          e.pageY - that.oMask.offsetHeight / 2 - that.oSmallbox.offsetTop;
  
        // 判断边界的问题
        if (left < 0) {
          left = 0;
        }
  
        if (top < 0) {
          top = 0;
        }
        //   判断右边和下边的边界问题
  
        let maxleft = that.oSmallbox.offsetWidth - that.oMask.offsetWidth;
  
        if (left <maxleft) {
          left = maxleft;
        }
  
        let maxtop = that.oSmallbox.offsetHeight - that.oMask.offsetHeight;
  
        if (top > maxtop) {
          top = maxtop;
        }
  
        that.oMask.style.left = left + "px";
        that.oMask.style.top = top + "px";
        // console.log(left, top)
  
        //   判断等比例的问题
        let x = (left * that.oBigbox.offsetWidth) / that.oMask.offsetWidth;
  
        let y = (top * that.oBigbox.offsetHeight) / that.oMask.offsetHeight;
  
        that.oBigbox.style.backgroundPositionX = -x + "px";
  
        that.oBigbox.style.backgroundPositionY = -y + "px";
      };
    }
  
    // 增加的功能函数
    addImg() {
      let that = this;
      for (let i = 0; i < this.oLis.length; i++) {
        this.oLis[i].style.backgroundImage = `url( ../kuangwei/img3/${i}.png)`;
       
        this.oLis[i].style.backgroundSize = `45px 45px`;
  
        this.oLis[i].onmousemove = function () {
          that.oSmallbox.style.backgroundImage = `url(../kuangwei/img3/${i}.png)`;
          that.oBigbox.style.backgroundImage = `url(../kuangwei/img3/${i}.png)`;
        };
      }
    }
    //   调用函数
    eventBind() {
      this.mouseover();
      this.mouseout();
      this.mousemove();
      this.addImg();
    }
  }

 // 这是新增的效果模板，添加这个就变成分页了
    // swiper - container',
   
  